<template>
	<!-- 回收站加盟 -->
	<view class="franchise">
		<view class="addRecover-main">
			<!-- 回收站名称 -->
			<view class="addRecoverMain-content">
				<text class="contentTitle">回收站名称：</text>
				<input type="text" v-model="recyclerInfo.name" placeholder="输入回收站名称" />
			</view>
			<!-- 性别选择 -->
			<view class="sexChoice">
				<view class="sexChoice-title">申请人性别：</view>
				<view class="choiceInfo man">
					<view class="redio" @tap="sexChoice(1)">
						<image v-if="recyclerInfo.sex==1"
							src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/true.png" mode="">
						</image>
					</view>
					<view>男</view>
				</view>
				<view class="choiceInfo">
					<view class="redio" @tap="sexChoice(2)">
						<image v-if="recyclerInfo.sex==2"
							src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/true.png" mode="">
						</image>
					</view>
					<view>女</view>
				</view>
			</view>
			<!-- 手机号 -->
			<view class="addRecoverMain-content">
				<text class="contentTitle">手机号：</text>
				<input type="tel" v-model="recyclerInfo.telphone" placeholder="请输入手机号" />
			</view>
			<view class="siteAddOrModify-info">
				<view class="title">验证码</view>
				<view class="getset">
					<input class="siteRightCode" type="text" placeholder="请输入验证码" v-model="personCode" />
					<view class="code" v-if="!isWaitingForCode" @tap="getCode">获取验证码</view>
					<view class="code" v-else>{{ countdown }}秒后重新获取</view>
				</view>
			</view>
			<view class="addRecoverMain-content">
				<text class="contentTitle">设置账号：</text>
				<input type="tel" v-model="recyclerInfo.user" placeholder="请设置一个账号" />
			</view>
			<view class="addRecoverMain-content">
				<text class="contentTitle">设置密码：</text>
				<input type="password" v-model="recyclerInfo.password" placeholder="请设置一个密码" />
			</view>
			<view class="addRecoverMain-content">
				<text class="contentTitle">确认密码：</text>
				<input type="password" v-model="recyclerInfo.repassword" placeholder="确认密码" />
			</view>
			<!-- 免责协议 -->
			<view class="agreement">
				<view class="agreement-main">
					<view class="agreement-top">
						<view :class="ischeck?'':'showCheck'" @tap="checkTap">
							<image v-show="ischeck" src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/checkbox.png" mode=""></image>
						</view>
						<view class="agreementName" @tap="showPop">免责协议名称</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹出框(协议弹框) -->
		<popup v-show="isPopup" :popEvent="protocol" :isPopup="isPopup" @changeData="hidePopup" openRouter="protocol"></popup>
		<view class="addButton" @tap="chise">申请加盟</view>
	</view>
</template>

<script>
	import popup from "@/component/popup.vue" //协议弹出框
	import util from '../../component/commen/api/util';
	export default {
		components:{popup},
		data() {
			return {
				recyclerInfo: { //信息
					name: "",
					sex: 1,
					telphone:"",//手机号
					user:"",//账号
					password:"",//设置密码
					repassword:"",//确认密码
				},
				value1: [],
				data: [],
				isWaitingForCode: false, // 标志位，表示是否正在等待验证码
				countdown: 0, // 倒计时剩余时间（单位：秒）
				timer: null, // 倒计时的定时器
				personCode:"",//用户输入的验证码
				code:"",//实际发送给用户的验证码
				protocol:"",//回收站协议
				isPopup:false,//是否显示协议弹框
				ischeck: false, //是否点击选项框
			};
		},
		onShow() {
			this.getProtocol()
		},
		mounted() {
			// this.getProtocol()
		},
		methods:{
			sexChoice(e) { //选择性别
				this.recyclerInfo.sex = e
			},
			getProtocol(){//获取协议内容
				var params = {
					do:"collectorinfo",
					op:"set"
				}
				util.requestWithSign(params).then(res=>{
					console.log(res)
					this.protocol = res.data[0].protocol
					console.log("请求的数据：",this.protocol)
				})
			},
			async getCode() {
				console.log("点击验证码",this.isWaitingForCode)
				// 如果正在等待验证码，直接返回，防止重复点击
				if (this.isWaitingForCode) {
					return;
				}
				console.log(this.recyclerInfo)
				// if(this.recyclerInfo.telphone==""){
				// 	return uni.showToast({
				// 		title:"请先输入手机号！",
				// 		icon:"none"
				// 	})
				// }
				const phoneReg = /^[1][3-9]\d{9}$/;
				if(!phoneReg.test(this.recyclerInfo.telphone)){
					return uni.showToast({
						title:"请输入正确手机号！",
						icon:"none"
					})
				}
				 // 设置倒计时为60秒
				this.countdown = 60;
				 // 开始倒计时
				 this.startCountdown();   
				try {
					var params = {
						do: "sendMobile",
						telphone: this.recyclerInfo.telphone
					}
					util.requestWithSign(params).then(res => {
						console.log("发送验证码返回：", res)
						
						if (res.errno != 0) {
							return uni.showToast({
								title: "验证码发送失败，请核对手机号重试！",
								icon: "none"
							})
						}
						this.code = res.data
						uni.showToast({
							title:"验证码已发送，请注意查收！"
						})
					})
				} catch (error) {
					console.log(error)
					uni.showToast({
						title: "验证码发送失败，请重试",
						icon:"none"
					})
				}
			},
			showPop() { //点击用户协议名称，显示弹出框
				this.isPopup = true
			},
			checkTap(){//点击选择协议
				this.ischeck = !this.ischeck
			},
			chise(){//点击一键加盟
				console.log("输入数据：",this.recyclerInfo)
				const {name,telphone,user,password,repassword} = this.recyclerInfo
				if (!name || !name.trim()) {
					return uni.showToast({
						title:"请输入姓名！",
						icon:"none"
					})
				}
				if (!telphone || !telphone.trim()) {
					return uni.showToast({
						title:"请输入手机号！",
						icon:"none"
					})
				}
				if(this.personCode==""){
					return uni.showToast({
						title:"请输入验证码！",
						icon:"none"
					})
				}
				if(this.personCode!=this.code){
					return uni.showToast({
						title:"验证码错误！",
						icon:"none"
					})
				}
				if (!user || !user.trim()) {
					return uni.showToast({
						title:"请设置一个用户名",
						icon:"none"
					})
				}
				if (!password || !password.trim()) {
					return uni.showToast({
						title:"密码不能为空！",
						icon:"none"
					})
				}
				if (!repassword || !repassword.trim()) {
					return uni.showToast({
						title:"请确认密码！",
						icon:"none"
					})
				}
				if(password!=repassword){
					return uni.showToast({
						title:"两次密码不一致,请重新输入！",
						icon:"none"
					})
				}
				if(!this.ischeck){
					return uni.showToast({
						title:"请查看并勾选协议！",
						icon:"none"
					})
				}
				var params = {
					do:"Collectorinfoset",
					op:"register",
					uid:uni.getStorageSync("uid"),
					name:name,
					sex:this.recyclerInfo.sex,
					telphone:telphone,
					user:user,
					pass:password,
					repass:repassword
				}
				util.requestWithSign(params).then(res=>{
					console.log("添加结果：",res)
					if(res.errno==0){
						uni.showModal({
							title:"申请成功！",
							showCancel:false,
							success() {
								uni.navigateBack()
							}
						})
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
				})
			},
			hidePopup(e) { //关闭遮罩，子组件传递数值
				// console.log(e)
				// 子组件传递false过来，关闭弹框
				this.isPopup = e
			},
			// 开始倒计时
			startCountdown() {
				this.isWaitingForCode = true; // 设置正在等待验证码的标志位为true
			
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--; // 倒计时减1
					} else {
						// 倒计时结束，清除定时器，重置标志位
						clearInterval(this.timer);
						this.timer = null;
						this.isWaitingForCode = false;
					}
				}, 1000); // 每隔1秒执行一次
			},
		}
	}
</script>

<style lang="scss" scoped>
.franchise{
		padding: 20rpx;
		box-sizing: border-box;

		.addRecover-main {
			background: #fff;
			border-radius: 20rpx;

			// padding: 20rpx;
			// box-sizing: border-box;
			.addRecoverMain-content {
				border-bottom: 2rpx solid #f6f6f6;
				display: flex;
				align-items: center;
				padding: 30rpx 20rpx;
				box-sizing: border-box;

				.contentTitle {
					width: 25%;
					margin-right: 20rpx;
				}
			}
			// 免责协议
			.agreement {
				width: 100%;
				margin: 20rpx 0;
				padding-bottom: 20rpx;
				.agreement-main {
					.agreement-top {
						margin-bottom: 20rpx;
						display: flex;
						justify-content: center;
						// align-items: flex-end;
						// border: 1px solid #f00;
						height: 38rpx;
			
						.showCheck {
							width: 33rpx;
							height: 33rpx;
							padding: 0;
							background: #fff;
							border-radius: 4rpx;
							border: 2rpx solid #d9d9d9;
						}
			
						image {
							width: 33rpx;
							height: 38rpx;
							margin: 0;
						}
			
						.agreementName {
							color: #00b388;
							font-size: 28rpx;
							text-decoration: underline;
						}
					}
			
					.appointment {
						background: #00b388;
						color: #fff;
						width: 40%;
						font-size: 29rpx;
					}
				}
			}
			.sexChoice {
				padding: 30rpx 20rpx;
				border-bottom: 2rpx solid #f6f6f6;
				display: flex;
				align-items: center;

				.sexChoice-title {
					margin-right: 20rpx;
				}

				.choiceInfo {
					display: flex;
					align-items: center;

					.redio {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						background: #f0f0f0;
						margin-right: 10rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
				}

				.man {
					margin-right: 80rpx;
				}

			}

			.siteAddOrModify-info {
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				margin-right: 20rpx;

				.title {
					width: 25%;
					margin-right: 20rpx;
				}

				.multiPicker {
					width: 80%;
				}
				.getset {
					display: flex;
					width: 74%;
					// justify-content: space-between;
					align-items: center;
					// border: 1px solid #f00;
					.getSite-title {
						color: #666666;
					}
					.code {
						font-size: 26rpx;
						// width: 170rpx;
						text-align: center;
						color: #808080;
						padding: 5rpx 10rpx;
						background: #f6f6f6;
						
					}
					.icon-xiangyoujiantou {
						margin-left: auto;
					}
					
				}
				.siteRightCode{
					width:50%;
					// border: 1px solid #000;
				}
				.code {
					font-size: 26rpx;
					// width: 170rpx;
					text-align: center;
					color: #808080;
					padding: 5rpx 10rpx;
					background: #f8f8f8;
					// border: 1px solid #f00;
				}
			}
		}

		.addButton {
			width: 100%;
			padding: 30rpx 0;
			margin-top: 60rpx;
			box-sizing: border-box;
			text-align: center;
			background: #00b388;
			color: #fff;
			border-radius: 30rpx;
		}
	
}
</style>
